<template>
    <div class="screen-block">
        <Title>{{ $t('screen.fleetRechargeRank') }}</Title>
        <div style="width: 100%; height: 90%">
            <scroll-ranking-board :config="config" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { ScrollRankingBoard } from '@kjgl77/datav-vue3';
    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import Title from '../title.vue';
    import { queryFleetTop10 } from '../../service';

    const config = ref({
        data: [
            {
                name: '车1',
                value: 55,
            },
            {
                name: '车2',
                value: 120,
            },
        ],
        // unit: '万元',
    });
    const fetchData = async () => {
        const data = await queryFleetTop10();
        const { result } = data as any;
        //  console.log(result);
        config.value.data = result.map(
            (o: { fleetName: string; rechargeAmount: number }) => {
                return {
                    name: o.fleetName,
                    value: o.rechargeAmount,
                };
            }
        );
    };
    // fetchData();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData,
    });
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;
    }
</style>
